<template>
  <div class="team-rankings">
    <h2>球队排名</h2>
    
    <div class="sport-selector">
      <button 
        v-for="sport in sports" 
        :key="sport.id"
        @click="selectedSport = sport.id"
        :class="{ active: selectedSport === sport.id }"
        class="sport-button"
      >
        {{ sport.name }}
      </button>
    </div>

    <div class="rankings-container">
      <div class="ranking-table">
        <div class="table-header">
          <span>排名</span>
          <span>球队</span>
          <span>场次</span>
          <span>胜负</span>
          <span>积分</span>
        </div>
        
        <div class="table-body">
          <div 
            v-for="(team, index) in currentRankings" 
            :key="team.id"
            class="team-row"
            :class="{ 'top-three': index < 3 }"
          >
            <div class="rank">
              <span v-if="index < 3" class="medal">{{ ['🥇', '🥈', '🥉'][index] }}</span>
              <span v-else class="rank-number">{{ index + 1 }}</span>
            </div>
            <div class="team-info">
              <img :src="team.logo" :alt="team.name" class="team-logo" />
              <span class="team-name">{{ team.name }}</span>
            </div>
            <div class="matches-played">{{ team.matchesPlayed }}</div>
            <div class="win-loss">
              <span class="wins">{{ team.wins }}</span>
              <span class="separator">-</span>
              <span class="losses">{{ team.losses }}</span>
            </div>
            <div class="points">
              <span class="points-number">{{ team.points }}</span>
              <span v-if="team.trend" class="trend" :class="team.trend">
                {{ trendIcon(team.trend) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const selectedSport = ref('football')

const sports = ref([
  { id: 'football', name: '足球' },
  { id: 'basketball', name: '篮球' },
  { id: 'volleyball', name: '排球' }
])

const footballRankings = ref([
  {
    id: 1,
    name: '皇家马德里',
    logo: 'https://picsum.photos/seed/real-madrid/40/40.jpg',
    matchesPlayed: 8,
    wins: 6,
    losses: 2,
    points: 18,
    trend: 'up'
  },
  {
    id: 2,
    name: '巴塞罗那',
    logo: 'https://picsum.photos/seed/barcelona/40/40.jpg',
    matchesPlayed: 8,
    wins: 5,
    losses: 3,
    points: 15,
    trend: 'up'
  },
  {
    id: 3,
    name: '曼彻斯特城',
    logo: 'https://picsum.photos/seed/man-city/40/40.jpg',
    matchesPlayed: 8,
    wins: 5,
    losses: 3,
    points: 15,
    trend: 'same'
  },
  {
    id: 4,
    name: '拜仁慕尼黑',
    logo: 'https://picsum.photos/seed/bayern/40/40.jpg',
    matchesPlayed: 8,
    wins: 4,
    losses: 4,
    points: 12,
    trend: 'down'
  },
  {
    id: 5,
    name: '巴黎圣日耳曼',
    logo: 'https://picsum.photos/seed/psg/40/40.jpg',
    matchesPlayed: 8,
    wins: 4,
    losses: 4,
    points: 12,
    trend: 'up'
  },
  {
    id: 6,
    name: '利物浦',
    logo: 'https://picsum.photos/seed/liverpool/40/40.jpg',
    matchesPlayed: 8,
    wins: 3,
    losses: 5,
    points: 9,
    trend: 'down'
  }
])

const basketballRankings = ref([
  {
    id: 1,
    name: '洛杉矶湖人',
    logo: 'https://picsum.photos/seed/lakers/40/40.jpg',
    matchesPlayed: 10,
    wins: 8,
    losses: 2,
    points: 16,
    trend: 'up'
  },
  {
    id: 2,
    name: '波士顿凯尔特人',
    logo: 'https://picsum.photos/seed/celtics/40/40.jpg',
    matchesPlayed: 10,
    wins: 7,
    losses: 3,
    points: 14,
    trend: 'same'
  },
  {
    id: 3,
    name: '金州勇士',
    logo: 'https://picsum.photos/seed/warriors/40/40.jpg',
    matchesPlayed: 10,
    wins: 6,
    losses: 4,
    points: 12,
    trend: 'down'
  },
  {
    id: 4,
    name: '迈阿密热火',
    logo: 'https://picsum.photos/seed/heat/40/40.jpg',
    matchesPlayed: 10,
    wins: 5,
    losses: 5,
    points: 10,
    trend: 'up'
  },
  {
    id: 5,
    name: '芝加哥公牛',
    logo: 'https://picsum.photos/seed/bulls/40/40.jpg',
    matchesPlayed: 10,
    wins: 4,
    losses: 6,
    points: 8,
    trend: 'same'
  }
])

const volleyballRankings = ref([
  {
    id: 1,
    name: '巴西国家队',
    logo: 'https://picsum.photos/seed/brazil-volley/40/40.jpg',
    matchesPlayed: 6,
    wins: 5,
    losses: 1,
    points: 15,
    trend: 'up'
  },
  {
    id: 2,
    name: '意大利国家队',
    logo: 'https://picsum.photos/seed/italy-volley/40/40.jpg',
    matchesPlayed: 6,
    wins: 4,
    losses: 2,
    points: 12,
    trend: 'same'
  },
  {
    id: 3,
    name: '中国国家队',
    logo: 'https://picsum.photos/seed/china-volley/40/40.jpg',
    matchesPlayed: 6,
    wins: 3,
    losses: 3,
    points: 9,
    trend: 'down'
  },
  {
    id: 4,
    name: '俄罗斯国家队',
    logo: 'https://picsum.photos/seed/russia-volley/40/40.jpg',
    matchesPlayed: 6,
    wins: 2,
    losses: 4,
    points: 6,
    trend: 'same'
  }
])

const currentRankings = computed(() => {
  switch (selectedSport.value) {
    case 'football':
      return footballRankings.value
    case 'basketball':
      return basketballRankings.value
    case 'volleyball':
      return volleyballRankings.value
    default:
      return footballRankings.value
  }
})

const trendIcon = (trend) => {
  switch (trend) {
    case 'up':
      return '↑'
    case 'down':
      return '↓'
    case 'same':
      return '→'
    default:
      return ''
  }
}
</script>

<style scoped>
.team-rankings {
  padding: 20px;
}

.team-rankings h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 20px;
  border-left: 4px solid #f39c12;
  padding-left: 15px;
}

.sport-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.sport-button {
  padding: 10px 20px;
  border: 2px solid #ecf0f1;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  color: #7f8c8d;
  font-weight: 500;
}

.sport-button:hover {
  border-color: #f39c12;
  color: #f39c12;
}

.sport-button.active {
  background: #f39c12;
  color: white;
  border-color: #f39c12;
}

.ranking-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.table-header {
  display: grid;
  grid-template-columns: 80px 1fr 80px 100px 80px;
  background: #f8f9fa;
  padding: 15px;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #ecf0f1;
}

.table-header span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-body {
  max-height: 500px;
  overflow-y: auto;
}

.team-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 100px 80px;
  padding: 15px;
  border-bottom: 1px solid #ecf0f1;
  transition: background-color 0.3s ease;
  align-items: center;
}

.team-row:hover {
  background-color: #f8f9fa;
}

.team-row.top-three {
  background: linear-gradient(135deg, #fff9e6 0%, #fff5cc 100%);
}

.rank {
  display: flex;
  justify-content: center;
  align-items: center;
}

.medal {
  font-size: 1.5rem;
}

.rank-number {
  font-weight: 600;
  color: #7f8c8d;
  font-size: 1.1rem;
}

.team-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.team-name {
  font-weight: 600;
  color: #2c3e50;
}

.matches-played {
  display: flex;
  justify-content: center;
  color: #7f8c8d;
}

.win-loss {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.wins {
  color: #27ae60;
  font-weight: 600;
}

.losses {
  color: #e74c3c;
  font-weight: 600;
}

.separator {
  color: #bdc3c7;
}

.points {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.points-number {
  font-weight: bold;
  color: #f39c12;
  font-size: 1.1rem;
}

.trend {
  font-size: 0.9rem;
  font-weight: bold;
}

.trend.up {
  color: #27ae60;
}

.trend.down {
  color: #e74c3c;
}

.trend.same {
  color: #95a5a6;
}

@media (max-width: 768px) {
  .team-rankings {
    padding: 15px;
  }
  
  .table-header,
  .team-row {
    grid-template-columns: 60px 1fr 60px 80px 60px;
    padding: 10px 5px;
  }
  
  .team-name {
    font-size: 0.8rem;
  }
  
  .sport-selector {
    justify-content: center;
  }
}
</style>